<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ref React.createRef()</title>
</head>

<body>
    <h1>ref React.createRef()</h1>
    <ol>
        <li>在构造函数中创建Ref对象</li>
        <li>在标签上将ref与创建的Ref对象连接起来</li>
    </ol>
    <hr />
    <div id="demoReact"></div>
</body>
<script src="../../node_modules/babel-standalone/babel.min.js"></script>
<script src="../../node_modules/react/umd/react.development.js"></script>
<script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">

    class MyCom extends React.Component {

        constructor(props) {
            super(props)
            this.myRef = React.createRef();
        }

        fun = () => {
            console.log(this.myRef.current.value);
        }

        render() {
            return (
                <div>
                    <div>我是一个类组件</div>
                    <input type="text" ref={this.myRef} replaceholder="请输入" />
                    <button onClick={this.fun}>点我得到输入框的值</button>
                </div>
            )
        }
    }

    // 创建根节点
    let root = ReactDOM.createRoot(document.getElementById("demoReact"));

    // 渲染组件
    root.render(<MyCom />);
</script>

</html>